<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的账单</title>
    <link rel="stylesheet" href="mui/css/mui.css">
    <script src="mui/js/mui.js"></script>
    <link rel="stylesheet" href="css/style.css?v1.1.2">
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        .order-center>h2{padding: .4rem 0 .4rem 2rem;}
    </style>
</head>
<body onscroll="swipeUp()">
<div class="mui-content">
    <div class="order-header mui-row">
        <div onclick="loadMore()" class="mui-col-xs-6 order-active">物业费</div>
        <div class="mui-col-xs-6"><a href="temporary.html">临时项</a></div>
    </div>
    <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center" onclick="window.location.href='order_details.html'">
            <h2>翠江明珠小区2期05单元605 <a href="javascript:void (0)">详情</a></h2>
            <p>支付状态：已支付</p>
            <p>订单状态：已处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
        <div class="order-btn"><a class="" href="phone.html">获取数据</a></div>
    </div>
    <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center" onclick="window.location.href='order_details.html'">
            <h2>翠江明珠小区2期05单元605 <a href="javascript:void (0)">详情</a></h2>
            <p>支付状态：已支付</p>
            <p>订单状态：未处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
        <div class="order-btn"><a class="order-disabled" href="javascript:void (0)">获取数据</a></div>
    </div>
    <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center" onclick="window.location.href='order_details.html'">
            <h2>翠江明珠小区2期05单元605 <a href="javascript:void (0)">详情</a></h2>
            <p>支付状态：未支付</p>
            <p>订单状态：未处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
    </div>
</div>
<div class="customer"></div>
<div class="backHome"></div>
<div class="notice-details-bottom" style="display:none;">— 上滑加载更多 —</div>
<script src="js/drag.js?v=1.0.1"></script>
<script src="layer_mobile/layer.js"></script>
<script>
    $(".customer").dragEffect(".customer");
    $(".backHome").dragEffect(".backHome");
    document.getElementsByClassName("backHome")[0].addEventListener('tap', function(event){
        window.location.href="home.html";
    });
</script>
<script>
    function det() {
        console.log(1);
    }
    var isLoad = true,bottomElem = $(".notice-details-bottom");
    function swipeUp() {
        var elemHeight=parseInt($('body').css("height"));
        var scrollTop,maxScroll;
        scrollTop = $(window).scrollTop();
        maxScroll = elemHeight - $(window).height();
        if(scrollTop >= maxScroll || elemHeight<$(window).height()){
            if(isLoad){
                mui('html').on("swipeup","body",loadMore);
                bottomElem.show()
            }else{
                bottomElem.show().text('— 没有更多了 —');
            }
        }else{
            mui('html').off("swipeup","body");
            bottomElem.hide()
        }
    }
    function loadMore() {
        console.log("你正在向上滑动");
        //模拟数据
        var html = '<div class="mui-card order"> <div class="order-top"><span>订单号:354565548654565</span> <p>2018-01-02 20:25:05</p> </div> <div class="order-center" onclick="det()"><h2>翠江明珠小区2期05单元605 <a href="javascript:void (0)">详情</a></h2> <p>支付状态：未支付</p><p>订单状态：未处理</p></div><div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div></div>';

        $(".mui-content").append(html+html);

    }
</script>
</body>
</html>